<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 240px;
            height: 240px;
        }
    </style>

    <div id="app">
        
    </div>
</head>
<body>


    <script>
        const app = document.getElementById("app")
        const arr = ['https://img0.baidu.com/it/u=2972251030,4111072434&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', 2, 3, 4, 5, 6, 7, 8, 9, 10]
        // 1. 动态生成img
        // 2. 每张图片的默认地址为 loading状态
        // 3. 把图片的真正路径通过自定义属性的方式添加到img标签上
        // 4. 根据可视区 和图片的大小判断页面中最多可以放几张图片  
        // 5. 通过节流的方式  监听浏览器滚动条  加载剩余图片
        for (var i = 0; i < arr.length; i++) {
            const img = new Image()
            img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.sdxco.cn%2Fimages%2Femptybook.gif&refer=http%3A%2F%2Fwww.sdxco.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661043507&t=5f9786dc440daea8e58bd533c0b87961'
            img.setAttribute('data-imgs', arr[i])
            app.append(img)
        }
    </script>
</body>
</html>